<script >
export default {
    data() {
        return {
            activeClass: 'active',
            errorClass: 'text-danger',
            isAct:false,
            isTrue:true
        }
    }
}
</script>

<template>
    <div :class="[activeClass, errorClass]">高新的彩虹</div>
    <div :class="[isAct ? activeClass : '', errorClass]">快乐的风</div>
    <div :class="[{active:isTrue},errorClass]">开心的树叶 </div>
</template>

<style scoped>
.active{
    color: green;
}
.text-danger{
    background-color: red;
}
</style>
